<template>
    <div class="hello">
        <div class="frame">
            <div class="frame-title">待处理(5)</div>
            <div class="frame-header flexal">
                <div class="frame-header-text" style="margin-left: 20px;">标题</div>
                <div class="frame-header-text" style="margin-left: 154px;">摘要</div>
                <div class="frame-header-text" style="margin-left: 185px;">发起人</div>
                <div class="frame-header-text" style="margin-left: 81px;">发起时间</div>
                <div class="frame-header-text" style="margin-left: 92px;">完成时间</div>
                <div class="frame-header-text" style="margin-left: 116px;">流程状态</div>
            </div>
            <div class="frame-content-block" v-infinite-scroll="scrollLoad" style="overflow:auto">
            <template v-for="(item,index) in list">
             <div :key="index">
            <div class="frame-content" style="display: flex;">
                <div style="width: 180px;height: 100%;">
                   <div style="margin-left: 20px;" class="frame-content-text">{{item.title}}</div>
                </div>
                <div style="width: 180px;height: 100%;margin-left: 23px;">
                    <div class="frame-content-text">请假类型：{{item.typeDesc}}</div>
                    <div class="frame-content-text">开始时间：{{item.startTime}}</div>
                    <div class="frame-content-text">结束时间：{{item.endTime}}</div>
                    
                </div>
                <div style="width: 100px;height: 100%;margin-left: 30px;" class="flexal">
                    <img :src="avatar"  class="imgIcon-avatar"/>
                    <div class="frame-content-text" style="margin-left: 5px;">{{item.name}}</div>
                </div>
                <div style="width: 110px;height: 100%;margin-left: 30px;" class="frame-content-text">{{item.issueTime}}</div>
                <div style="width: 110px;height: 100%;margin-left: 35px;" class="frame-content-text">{{item.finishTime}}</div>
                <div style="width: 130px;height: 100%;margin-left: 35px;" class="flexcen" v-if="item.status == 0">
                    <div class="flexcen frame-button">拒绝</div>
                    <div class="flexcen frame-button" style="background: #0052D9;color: #FFFFFF;margin-left: 13px;">同意</div>
                </div>
                <div style="width: 130px;height: 100%;margin-left: 35px;" class="flexcen" v-if="item.status == 1">
                    <div class="frame-content-text" style="color: #26C215;">已通过</div>
                </div>
                <div style="width: 130px;height: 100%;margin-left: 35px;" class="flexcen" v-if="item.status == 2">
                    <div class="frame-content-text" style="color: #D50022;">已拒绝</div>
                </div>
                <div style="width: 130px;height: 100%;margin-left: 35px;" class="flexcen" v-if="item.status == 3">
                    <div class="frame-content-text" style="color: #FF862A;">审核中</div>
                </div>
            </div>
            <div class="frame-line"></div>
            </div>
        </template>
        </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'workList',
    props: {
    //0:待处理1：已通过2：已拒绝3:审核中
      status: {
        type:Number,
        default:0
      }
    },
    data(){
        return{
            avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
            list:[
                {
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:1                    //0:待处理1：已通过2：已拒绝3:审核中
                },
                {
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:2                     //0:待处理1：已通过2：已拒绝3:审核中
                },
                {
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:3                     //0:待处理1：已通过2：已拒绝3:审核中
                },
                {
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:0                     //0:待处理1：已通过2：已拒绝3:审核中
                },
                {
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:0                     //0:待处理1：已通过2：已拒绝3:审核中
                },{
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:0                     //0:待处理1：已通过2：已拒绝3:审核中
                },{
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:0                     //0:待处理1：已通过2：已拒绝3:审核中
                },{
                    title:'张三提交的请假申请',
                    typeDesc:'事假',
                    startTime:'2024-08-08 9:00',
                    endTime:'2024-08-09  18:00',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    name:'张三',
                    issueTime:'2024-08-08  9:00',
                    finishTime:'2024-08-08  9:00',
                    status:0                     //0:待处理1：已通过2：已拒绝3:审核中
                },
            ]
        }
    },

    methods:{
        // 滑底触发
        scrollLoad(){
          console.log('下拉到底部了')
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
    .frame{
        margin-top: 31px;
        margin-left: 12px;
        width: 1005px;
        height: 766px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        .frame-title{
            padding-top: 15px;
            margin-left: 16px;
            font-weight: 500;
            font-size: 19px;
            color: #333333;
        }
        .frame-header{
            margin-top: 21px;
            margin-left: 16px;
            width: 969px;
            height: 35px;
            background: #F1F2F3;
            border-radius: 0px 0px 0px 0px;
        }
        .frame-header-text{
            font-weight: 400;
            font-size: 15px;
            color: #535D6D;
        }
        .frame-content{
            margin-top: 25px;
            margin-left: 16px;
            width: 969px;
            // height: 35px;
            // background: #F1F2F3;
            border-radius: 0px 0px 0px 0px;
        }
        .frame-content-text{
            font-weight: 400;
            font-size: 13px;
            color: #272B34;
        }
        .frame-button{
            width: 52px;
            height: 25px;
            background: #FFFFFF;
            border-radius: 29px 29px 29px 29px;
            border: 1px solid #0052D9;
            font-size: 11px;
            color: #0052D9;
        }
        .frame-line{
            margin-top: 24px;
            margin-left: 16px;
            width: 969px;
            height: 0px;
            border: 1px solid #C9C9C9;
        }
        .frame-content-block{
            width: 100%;
            height: 640px;
            // background: #000;
        }
    }
    .imgIcon-avatar{
        width: 26px;
        height: 27px;
        border-radius: 50%;
    }
  </style>
  